<div class="settings-container">
  <div class="flex align-items-center justify-content-between mb-4">
    <h1>Readarr</h1>
  </div>

  <!-- Loading/Error State Component -->
  <div class="mb-4">
    <app-loading-error-state
      *ngIf="readarrLoading() || readarrError()"
      [loading]="readarrLoading()"
      [error]="readarrError()"
      loadingMessage="Loading settings..."
      errorMessage="Could not connect to server"
    ></app-loading-error-state>
  </div>

  <!-- Content - only shown when not loading and no error -->
  <div *ngIf="!readarrLoading() && !readarrError()">
    
    <!-- Global Configuration Card -->
    <p-card styleClass="settings-card mb-4">
      <ng-template pTemplate="header">
        <div class="flex align-items-center justify-content-between p-3 border-bottom-1 surface-border">
          <div class="header-title-container">
            <h2 class="card-title m-0">Readarr Settings</h2>
            <span class="card-subtitle">Configure general Readarr integration settings</span>
          </div>
        </div>
      </ng-template>

      <form [formGroup]="globalForm" class="p-fluid">
        <div class="field-row">
          <label class="field-label">Failed Import Max Strikes</label>
          <div class="field-input">
            <p-inputNumber
              formControlName="failedImportMaxStrikes"
              [min]="-1" 
              [showButtons]="true"
              buttonLayout="horizontal"
              incrementButtonIcon="pi pi-plus"
              decrementButtonIcon="pi pi-minus"
            ></p-inputNumber>
            <small *ngIf="hasError('failedImportMaxStrikes', 'required')" class="form-error-text">This field is required</small>
            <small *ngIf="hasError('failedImportMaxStrikes', 'min')" class="form-error-text">Value cannot be less than -1</small>
            <small *ngIf="hasError('failedImportMaxStrikes', 'max')" class="form-error-text">Value cannot exceed 5000</small>
            <small class="form-helper-text">Maximum number of strikes before removing a failed import (-1 to use global setting; 0 to disable)</small>
          </div>
        </div>

        <!-- Save Button -->
        <div class="card-footer mt-3">
          <button
            pButton
            type="button"
            label="Save"
            icon="pi pi-save"
            class="p-button-primary"
            [disabled]="!globalForm.dirty || !hasGlobalChanges || globalForm.invalid || readarrSaving()"
            [loading]="readarrSaving()"
            (click)="saveGlobalConfig()"
          ></button>
        </div>
      </form>
    </p-card>

    <!-- Instance Management Card -->
    <p-card styleClass="settings-card mb-4">
      <ng-template pTemplate="header">
        <div class="flex align-items-center justify-content-between p-3 border-bottom-1 surface-border">
          <div class="header-title-container">
            <h2 class="card-title m-0">Instances</h2>
            <span class="card-subtitle">Manage Readarr server instances</span>
          </div>
        </div>
      </ng-template>

      <!-- Empty state when no instances -->
      <div *ngIf="instances.length === 0" class="no-items text-center py-5 text-color-secondary">
        <i class="pi pi-server text-4xl mb-3"></i>
        <p class="m-0">No Readarr instances configured</p>
        <small>Add an instance to start using Readarr integration</small>
      </div>

      <!-- Instances List -->
      <div *ngIf="instances.length > 0" class="items-list">
        <div 
          *ngFor="let instance of instances" 
          class="item-item p-3 border-round surface-border border-1 mb-3"
          [ngClass]="{ 'enabled': instance.enabled }"
        >
          <div class="flex justify-content-between align-items-center">
            <div class="item-info flex-1">
              <div>
                <div class="flex align-items-center mb-2">
                  <h4 class="m-0 mr-2">{{ instance.name }}</h4>
                  <p-tag 
                    value="Readarr" 
                    [severity]="'info'"
                    class="mr-2"
                  ></p-tag>
                  <p-tag 
                    [value]="instance.enabled ? 'Enabled' : 'Disabled'" 
                    [severity]="instance.enabled ? 'success' : 'secondary'"
                  ></p-tag>
                </div>
                <div class="item-details client-details text-sm text-color-secondary">
                  <div>
                    <label>URL: {{ instance.url }}</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="item-actions">
              <button 
                pButton 
                type="button" 
                icon="pi pi-pencil" 
                class="p-button-rounded p-button-text p-button-sm mr-1"
                pTooltip="Edit instance"
                tooltipPosition="left"
                [disabled]="readarrSaving()"
                (click)="openEditInstanceModal(instance)"
              ></button>
              <button 
                pButton 
                type="button" 
                icon="pi pi-trash" 
                class="p-button-rounded p-button-text p-button-danger p-button-sm"
                pTooltip="Delete instance"
                tooltipPosition="left"
                [disabled]="readarrSaving()"
                (click)="deleteInstance(instance)"
              ></button>
            </div>
          </div>
        </div>
      </div>

      <!-- Action buttons -->
      <div class="card-footer mt-3">
        <button 
          pButton 
          type="button" 
          icon="pi pi-plus" 
          label="Add Instance"
          class="p-button-outlined"
          [disabled]="readarrSaving()"
          (click)="openAddInstanceModal()"
        ></button>
      </div>
    </p-card>
  </div>
</div>

<!-- Instance Modal -->
<p-dialog 
  [(visible)]="showInstanceModal" 
  [modal]="true" 
  [closable]="true"
  [draggable]="false"
  [resizable]="false"
  styleClass="instance-modal"
  [header]="modalTitle"
  (onHide)="closeInstanceModal()"
>
  <form [formGroup]="instanceForm" class="p-fluid instance-form">
    <div class="field flex flex-row">
      <label class="field-label">Enabled</label>
      <div class="field-input">
        <p-checkbox formControlName="enabled" [binary]="true"></p-checkbox>
        <small class="form-helper-text">Enable this Readarr instance</small>
      </div>
    </div>

    <div class="field">
      <label for="instance-name">Name *</label>
      <input 
        id="instance-name"
        type="text" 
        pInputText 
        formControlName="name" 
        placeholder="My Readarr Instance"
        class="w-full"
      />
      <small *ngIf="hasError(instanceForm, 'name', 'required')" class="form-error-text">Name is required</small>
    </div>

    <div class="field">
      <label for="instance-url">URL *</label>
      <input 
        id="instance-url"
        type="text" 
        pInputText 
        formControlName="url" 
        placeholder="http://localhost:8787"
        class="w-full"
      />
      <small *ngIf="hasError(instanceForm, 'url', 'required')" class="form-error-text">URL is required</small>
      <small *ngIf="hasError(instanceForm, 'url', 'invalidUri')" class="form-error-text">URL must be a valid URL</small>
      <small *ngIf="hasError(instanceForm, 'url', 'invalidProtocol')" class="form-error-text">URL must use http or https protocol</small>
    </div>

    <div class="field">
      <label for="instance-apikey">API Key *</label>
      <input 
        id="instance-apikey"
        type="password" 
        pInputText 
        formControlName="apiKey" 
        placeholder="Your Readarr API key"
        class="w-full"
      />
      <small *ngIf="hasError(instanceForm, 'apiKey', 'required')" class="form-error-text">API key is required</small>
    </div>
  </form>

  <ng-template pTemplate="footer">
    <div class="modal-footer">
      <button 
        pButton 
        type="button" 
        label="Cancel" 
        class="p-button-text"
        (click)="closeInstanceModal()"
      ></button>
      <button 
        pButton 
        type="button" 
        label="Save" 
        icon="pi pi-save"
        class="p-button-primary ml-2"
        [disabled]="instanceForm.invalid || readarrSaving()"
        [loading]="readarrSaving()"
        (click)="saveInstance()"
      ></button>
    </div>
  </ng-template>
</p-dialog>

<!-- Confirmation Dialog -->
<p-confirmDialog></p-confirmDialog> 